<script setup>
import { ref, reactive, onMounted, nextTick } from "vue";
import axios from 'axios'
import write from "../composibles/write.js";
import ElementBtn from "./ElementBtn.vue";

const formRef = ref(null);

const formLabelAlign = reactive({
  name: "223",
  region: "",
  type: "",
});

const formRules = reactive({
  name: [
    { required: true, message: "请输入姓名", trigger: "blur" },
    { min: 2, max: 5, message: "长度在 2 到 5 个字符", trigger: "blur" }
  ],
  region: [
    { required: true, message: "请输入地区", trigger: "blur" }
  ],
  type: [
    { required: true, message: "请输入类型", trigger: "blur" }
  ]
});


const submitForm = async (form) => {
  await formRef.value.validate((valid) => {
    if (valid) {
      alert("submit!");
    } else {
      console.log("error submit!!");
      return false;
    }
  });
}
let isOk = ref(false)
const resetForm = (form) => {
  formRef.value.resetFields();
  console.log(formLabelAlign)
}
const result = ref()
const childClick = (val) => {
  result.value = val
}

// const ass=async ()=>{
//   for await (let i of [1,2,3]){
//     console.log(i)
//   }
// }
// ass()

const getData = () => {
  axios({
    method: 'get',
    url: '/api/getMarker',
    params:{
      id:1,
      name:"wcy"
    }
  }).then(res=>{
    console.log(res);
  })
}
</script>

<template>
  <el-form label-width="100px" style="max-width: 460px" ref="formRef" :rules="formRules" :model="formLabelAlign">
    <el-form-item label="Name" prop="name">
      <el-input v-model="formLabelAlign.name" />
    </el-form-item>
    <el-form-item label="zone" prop="region">
      <el-input v-model="formLabelAlign.region" />
    </el-form-item>
    <el-form-item label="form" prop="type">
      <el-input v-model="formLabelAlign.type" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm('formRef')">提交</el-button>
      <el-button @click="resetForm('formRef')">清空</el-button>
      <ElementBtn btnName="点击按钮" @childClick="childClick" />
      <div style="display: flex">
        <p v-for="(key, i) in result" style="margin: 10px;">{{ key }}</p>
      </div>
    </el-form-item>
  </el-form>
  <el-button type="primary" @click="getData">test</el-button>
</template>

<style>
  .el-form-item__label{
    color: aqua !important;
  }
</style>